<template>

  <img @click="clickVideo" :src="'/api/video/img/uuid/' + props.video_id" alt="课程封面" style="width: 100%;height: 65%;object-fit: cover">
  <p @click="clickVideo" style="margin: 2px 0;color: #18191C;height: 42px;font-size: 16px">{{ props.video_title }}</p>
  <div style="display: flex;justify-content: space-between">
    <span @click="clickUser" style="color: #9499A0;font-size: 13px">{{ props.video_author }}</span>
    <span style="color: #9499A0;font-size: 13px">{{ props.video_time }}</span>
  </div>

</template>

<script setup>
import {useRouter} from "vue-router";

const props = defineProps(['video_img', 'video_title', 'video_id', 'video_author', 'video_time', 'user_id'])

const router = useRouter();
function clickVideo(){
  router.push("/video/"+props.video_id)
}

function clickUser(){
  router.push("/user/"+props.user_id)
}

</script>

<style scoped>

</style>